<template>
  <div>
    <el-table
      ref="dataTable"
      v-loading="table.loading"
      stripe
      highlight-current-row
      :data="table.tableRows"
      style="margin-top: 20px;"
      @select="select"
      @select-all="selectAll"
      @current-change="changeCurrent"
      @sort-change="changeSort"
    >
      <el-table-column v-if="isMultipleTable" type="selection" :selectable="selectable"></el-table-column>
      <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>
      <el-table-column
        property="shopTitle"
        label="店铺标题"
        min-width="120px"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-dropdown placement="bottom-start">
            <el-button type="text" size="small">{{ scope.row.shopTitle }}</el-button>
            <el-dropdown-menu slot="dropdown" style="margin-left: 10px">
              <el-dropdown-item
                @click.native="showJoinDetail({
                detailDialog: 'GoodsShopDetailDialog',
                url: '/goods-shop/admin/one/' + scope.row.shopId
              })"
              >详情</el-dropdown-item>
              <el-dropdown-item
                @click.native="showJoinSearch({
                searchDialog: 'GoodsShopMain'
              })"
              >搜索</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column
        property="shopIsActive"
        label="店铺是否可用"
        min-width="120px"
        sortable
        show-overflow-tooltip
        :formatter="(row, column, cellValue) => formatterDict(cellValue, 'YES_NO')"
      ></el-table-column>
      <el-table-column
        property="detail"
        label="认证详情JSON"
        min-width="120px"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-button type="text" @click="showJsonDialog(scope.row.detail)">点击查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        property="checkStatus"
        label="审核状态"
        min-width="120px"
        sortable
        show-overflow-tooltip
        :formatter="(row, column, cellValue) => formatterDict(cellValue, 'SHOP_CHECK_STATUS')"
      ></el-table-column>
      <el-table-column
        property="checkDescription"
        label="审核描述"
        min-width="120px"
        sortable
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        property="checkedUserPhone"
        label="审核人手机号"
        min-width="120px"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-dropdown placement="bottom-start">
            <el-button type="text" size="small">{{ scope.row.checkedUserPhone }}</el-button>
            <el-dropdown-menu slot="dropdown" style="margin-left: 10px">
              <el-dropdown-item
                @click.native="showJoinDetail({
                detailDialog: 'UserDetailDialog',
                url: '/user/admin/one/' + scope.row.userId
              })"
              >详情</el-dropdown-item>
              <el-dropdown-item
                @click.native="showJoinSearch({
                searchDialog: 'UserMain'
              })"
              >搜索</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column
        property="checkedUserNickname"
        label="审核人昵称"
        min-width="120px"
        sortable
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        property="checkedUserIsActive"
        label="审核人是否可用"
        min-width="120px"
        sortable
        show-overflow-tooltip
        :formatter="(row, column, cellValue) => formatterDict(cellValue, 'YES_NO')"
      ></el-table-column>
      <el-table-column
        property="version"
        label="版本号"
        min-width="120px"
        sortable
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column property="createTime" label="创建时间" min-width="120px" sortable></el-table-column>
      <el-table-column property="updateTime" label="更新时间" min-width="120px" sortable></el-table-column>
      <el-table-column
        property="isActive"
        label="是否可用"
        min-width="120px"
        sortable
        show-overflow-tooltip
      >
        <template slot="header">
          是否可用
          <el-tooltip effect="dark" content="店铺认证
是否可用" placement="top">
            <i class="el-icon-info" />
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <template v-if="!isOnlyShowTable">
            <el-button
              v-if="scope.row.isActive === 0"
              size="mini"
              type="danger"
              plain
              @click="active(scope.row)"
            >否</el-button>
            <el-button
              v-if="scope.row.isActive === 1"
              size="mini"
              type="primary"
              plain
              @click="active(scope.row)"
            >是</el-button>
          </template>
          <template v-else>
            <el-button v-if="scope.row.isActive === 0" size="mini" type="danger" plain>否</el-button>
            <el-button v-if="scope.row.isActive === 1" size="mini" type="primary" plain>是</el-button>
          </template>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100px">
        <template slot-scope="scope">
          <el-dropdown v-if="isOnlyShowTable">
            <el-button type="primary" size="small">
              选择
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown" style="margin-left: 10px">
              <el-dropdown-item @click.native="showDetail(scope.row)">详情</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown v-else>
            <el-button type="primary" size="small">
              选择
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown" style="margin-left: 10px">
              <el-dropdown-item @click.native="showEdit(scope.row)">编辑</el-dropdown-item>
              <el-dropdown-item @click.native="showDetail(scope.row)">详情</el-dropdown-item>
              <el-dropdown-item divided @click.native="remove(scope.row)">
                <span style="color: #ff0000;">删除</span>
              </el-dropdown-item>
              <el-dropdown-item
                v-if="scope.row.checkStatus == 0"
                @click.native="certificationSuccess(scope.row)"
              >认证通过</el-dropdown-item>
              <el-dropdown-item
                v-if="scope.row.checkStatus == 0"
                @click.native="certificationFail(scope.row)"
              >认证失败</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 20px; overflow: hidden">
      <div style="float: right;">
        <el-pagination
          :current-page="pager.pageNo"
          :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.total"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </div>
  </div>
</template>

<script>
import * as utils from '@/utils/utils'
const resUrl = process.env.VUE_APP_RES_URL
export default {
  name: 'GoodsShopCertificationTable',
  props: {
    /** 是否单选表格 */
    isSingleTable: {
      type: Boolean,
      default: false,
    },
    /** 是否多选表格 */
    isMultipleTable: {
      type: Boolean,
      default: false,
    },
    /** 是否仅展示的表格，表格中不包含激活/冻结、编辑、删除等操作 */
    isOnlyShowTable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchType: 'advance',
      pager: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      searchOpts: {
        sortColumn: null,
        sortOrder: null,
      },
      table: {
        loading: false,
        tableRows: [],
        pageSelection: {},
        allSelection: [],
        currentRow: {},
      },
      dataDictCodes: ['YES_NO', 'SHOP_CHECK_STATUS'],
      dataDictItems: [],
      selectedData: [],
      selectedDataIdProp: 'id',
      resUrl: resUrl,
    }
  },
  computed: {},
  mounted() {
    this.search()
  },
  methods: {
    /** 表格索引 */
    indexMethod(index) {
      return index + (this.pager.pageNo - 1) * this.pager.pageSize + 1
    },
    /** 触发父组件表格搜索事件 */
    search() {
      if (this.searchType === 'advance') {
        this.$emit('searchTable')
      } else if (this.searchType === 'quick') {
        this.$emit('quickSearch')
      }
    },
    /** 触发父组件展示编辑对话框 */
    showEdit(row) {
      this.$emit('showEditDialog', JSON.parse(JSON.stringify(row)))
    },
    /** 触发父组件展示数据详情对话框 */
    showDetail(row) {
      this.$emit('showDetailDialog', JSON.parse(JSON.stringify(row)))
    },
    /** 删除行数据 */
    remove(row) {
      utils.remove({
        tableComponent: this,
        url: '/goods-shop-certification/admin/remove/' + row.id,
      })
    },
    /** 激活或冻结行数据 */
    active(row) {
      utils.active({
        tableComponent: this,
        url: '/goods-shop-certification/admin/active',
        row: row,
      })
    },
    /** 多选表格选中或取消选中 */
    select(selection, row) {
      utils.select(this, selection, row)
    },
    /** 多选表格全选或取消全选 */
    selectAll(selection) {
      utils.selectAll(this, selection)
    },
    /** 多选表格行数据是否可被勾选 */
    selectable(row, index) {
      return utils.selectable(this, row)
    },
    /** 单选表格选中数据 */
    changeCurrent(currentRow) {
      if (currentRow) {
        this.table.currentRow = currentRow
      }
    },
    /** 表格切换排序字段 */
    changeSort(sortColumn) {
      utils.changeSort(this, sortColumn)
    },
    /** 切换分页组件pageNo */
    changePageNo(pageNo) {
      utils.changePageNo(this, pageNo)
    },
    /** 更新分页组件pageSize */
    changePageSize(pageSize) {
      utils.changePageSize(this, pageSize)
    },
    /** 触发父组件展示关联表数据的详情对话框 */
    showJoinDetail(options) {
      this.$emit('showJoinDetailDialog', options)
    },
    /** 触发父组件展示关联表数据的搜索对话框 */
    showJoinSearch(options) {
      this.$emit('showJoinSearchDialog', options)
    },
    /** 格式化表格中的数据字典 */
    formatterDict(cellValue, dictCode) {
      return utils.getDataDictItemDisplayValue({
        dataDictItems: this.dataDictItems,
        dictCode: dictCode,
        value: cellValue,
      }).displayValue
    },
    //查看jsonn内容
    showJsonDialog(value) {
      this.$emit('showJsonDialog', value)
    },
    //认证通过
    certificationSuccess(row) {
      this.certification(row, 1)
    },
    //认证失败
    certificationFail(row) {
      this.certification(row, 2)
    },
    certification(row, checkStatus) {
      this.$prompt('请填写审核描述', '提示', {
          inputType: 'textarea',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          let certification = {
            id: row.id,
            shopId: row.shopId,
            checkStatus: checkStatus,
            checkDescription: value
          }
          utils.doPostQs('/goods-shop-certification/admin/check', certification , {}, true).then(res => {
            this.$message.success('更新成功')
            this.search()
          }).catch(error => {})
        }).catch(() => {})
    },

    
  },
}
</script>

<style>
</style>